<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-row :gutter="10">
        <el-col :span="20" class="topice_title">
          <span>【{{topiceinfo.questionType==0?'单选题':(topiceinfo.questionType==1?'多选题':'判断题')}}】&nbsp;&nbsp;&nbsp;&nbsp;{{topiceinfo.questionTitle}}</span>
        </el-col>
        <el-col :span="2">
          <el-button style="float: right; padding: 3px 0" type="text" @click='edit()'>编辑</el-button>
        </el-col>
        <el-col :span="2">
          <el-button style="float: right; padding: 3px 0" type="text" @click='deltopice(topiceinfo)'>删除</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="upload_image_show">
      <img :src="topiceinfo.imgUrl" v-if="topiceinfo.imgUrl" width="300" height="250" />
    </div>
    <div v-for="(item,index) in topiceinfo.options" :key="index" class="text item">
      <div v-if="item!=null">
        [选项{{String.fromCharCode(index+65)}}]&nbsp;&nbsp;&nbsp;{{item}}
      </div>
    </div>
    <div style="float: left; margin: 0.25rem; font-size: 0.75rem;">
      <div style="float: left;">正确答案：</div>
    </div>
    <div v-for="i in topiceinfo.rightKey" style="float: left;">
      {{String.fromCharCode(i+64)}}
    </div>

  </el-card>
</template>

<script>
  export default {
    name: 'Topiccard',
    props: ['topiceinfo'],
    data() {
      return {}
    },
    methods: {
      edit() {
        this.$message({
          type: 'info',
          message: '暂时不支持此操作'
        });
      },
      deltopice(info) {
        this.$confirm('删除此题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$postRequest({
            url: '/questionInfo/delAndUpdateSerialNum',
            params: {
              'serialNum': this.topiceinfo.serialNum,
              'testUUId': info.testUuid,
              'questionType': info.questionType
            }
          }).then(res => {

            if (res.code == 200) {
              console.log(res)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.$emit('deltopice', info.questionUuid); //向父组件传参
            } else {
              this.$message({
                type: 'info',
                message: '删除失败'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    }
  }
</script>

<style>
  .text {
    font-size: 14px;
    margin: 0px;
  }

  .text > div {
    display: flex;
    margin: 0.3125rem;
  }

  .topice_title {
    /* background-color: #000000; */
    display: flex;
    text-align: left;
    line-height: 40px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
